<div>
    <el-form    label-width="100%">
        <el-form-item label="">
        </el-form-item>
    </el-form>



    <el-button v-if="!parentData"  type="primary" @click="edit(addItem)"  icon="plus">新增</el-button>
    <div class="switch-card-list">
        <kf-card class="switch-card active" :width="460"  style="height: auto" v-if="addItem.edit">
            <div class="switch-card__header" slot="header">
                <div class="switch-card__title">
                    <span class="switch-card__name" >添加服务项</span>
                </div>
                <div class="switch-card__append">
                    <span><span></span></span>
                </div>
            </div>
            <div class="switch-card__body">
                <div  class="card-item" >
                    <el-form ref="addItem" :model="addItem" label-width="80px">
                        <el-row type="flex"  justify="">
                                <el-form-item label="服务项"  prop="itemName":rules
                                        ="[ {required: true, message: '服务项名称不能为空'},
                                        {max:20,message:'长度不能超过20'}
                                    ]">
                                    <el-input v-model="addItem.itemName"></el-input>
                                </el-form-item>
                                <el-form-item label="排班基数" prop="scheduleBaseNum" :rules="[ {required: true, message: '排班基数不能为空'},
                                            { type:'number',max:20,message:'不能大于20'}
                                        ]">
                                    <el-input v-model.number="addItem.scheduleBaseNum"></el-input>
                                </el-form-item>
                        </el-row>
                        <el-row type="flex"  justify="">
                            <el-form-item label="进出港"  prop="importOrExport" :rules
                                    ="[{required:true,message:'进出港不能为空'}]">
                                <el-select v-model="addItem.importOrExport" placeholder="请选择进出港">
                                    <el-option label="进港" value="进港"></el-option>
                                    <el-option label="出港" value="出港"></el-option>
                                    <el-option label="中转联程" value="中转联程"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="基准时间"  prop="timeStrategy" :rules
                                    ="[{required:true,message:'进出港不能为空'}]">
                                <el-select v-model="addItem.timeStrategy" placeholder="请选择基准时间">
                                    <el-option label="起飞时间" value="起飞时间"></el-option>
                                    <el-option label="落地时间" value="落地时间"></el-option>
                                    <el-option label="自定义时间" value="自定义时间"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row type="flex"  justify="">
                            <el-form-item label="时间差"  prop="beforeOrAfter" :rules
                                    ="[{required:true,message:'时间差不能为空'}]">
                                <el-select v-model="addItem.beforeOrAfter" placeholder="请选择时间差">
                                    <el-option label="基准时间前" value="基准时间前"></el-option>
                                    <el-option label="基准时间后" value="基准时间后"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="时间差值（分钟）" prop="difference" :rules="[ {required: true, message: '时间差值不能为空'},
                                            { type:'number',message:'必须为数字值'}]">
                                <el-input v-model.number="addItem.difference"></el-input>
                            </el-form-item>
                        </el-row>
                        <!--<el-row type="flex"  justify=""  >-->
                            <!--<el-form-item label="按组排班"  v-if="addItem.scheduleBaseNum>1">-->
                                <!--<el-checkbox v-model="addItem.hasGroup">按组排班</el-checkbox>-->
                            <!--</el-form-item>-->
                        <!--</el-row>-->
                    </el-form>
                </div>
            </div>
            <div class="switch-card__footer" slot="footer">
                <el-button type="text" icon="plus"  @click="addItems(addItem)"  size="small">添加</el-button>
                <el-button type="text" icon="close" @click="cancleEdit(addItem)"  size="small">取消</el-button>
            </div>
        </kf-card>
        <kf-card v-for="item,index in serviceItems" :key="item"  class="switch-card active"
                 :width="item.edit?460:240"   style="height:auto;min-height:240px">
            <div class="switch-card__header" slot="header" @click="chose(item,index)">
                <div class="switch-card__title">
                    <span class="switch-card__name" v-text="item.itemName"></span>
                </div>
                <div class="switch-card__title">
                    <span>排班基数:&nbsp;<span class="switch-card__name" v-text="item.scheduleBaseNum"></span></span>
                </div>
                <div class="switch-card__append" v-if="!parentData">
                    <el-button @click="deleteRoom(item,index)">
                        <span ><i class="el-icon-delete"></i></span>
                    </el-button>

                </div>
            </div>
            <div class="switch-card__body" @click="chose(item,index)" style="height: 100%">
                <div>

                </div>
                <div class="card-item" v-if="!item.edit">
                    <div>
                        <h8 >进出港：{{item.importOrExport}}</h8>
                    </div>
                    <div><h8 >基准时间：{{item.timeStrategy}}</h8></div>
                    <div>
                        <h8 >开始时间：{{item.beforeOrAfter}}{{item.difference}}分钟</h8>
                    </div>
                    <!--<div>-->
                        <!--<el-checkbox v-model="item.hasGroup" disabled>按组排班</el-checkbox>-->
                    <!--</div>-->

                    <h7>服务组：</h7>
                    <template >
                        <div v-for = "team,uIn in item.teams" >
                            <div v-if="uIn<5">
                                <el-tag type="success" v-text="team.teamName"></el-tag>
                            </div>
                            <el-tag type="success"  v-if="uIn==5">............................</el-tag>
                        </div>
                    </template>
                </div>
                <div  class="" v-if="item.edit">
                    <div  class="card-item" >
                        <el-form :ref="item.gsiId" :model="item" label-width="80px">
                            <el-row type="flex"  justify="">
                                    <el-form-item label="项目名称" prop="itemName":rules
                                            ="[ {required: true, message: '项目名称不能为空'},
                                            {max:20,message:'长度不能超过20'}
                                        ]">
                                        <el-input v-model="item.itemName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="排班基数" prop="scheduleBaseNum" :rules="[ {required: true, message: '排班基数不能为空'},
                                                { type:'number',max:20,message:'不能大于20'}
                                            ]">
                                        <el-input v-model.number="item.scheduleBaseNum"></el-input>
                                    </el-form-item>
                            </el-row>
                            <el-row type="flex"  justify="">
                                <el-form-item label="进出港"  prop="importOrExport" :rules
                                        ="[{required:true,message:'进出港不能为空'}]">
                                    <el-select v-model="item.importOrExport" placeholder="请选择进出港">
                                        <el-option label="进港" value="进港"></el-option>
                                        <el-option label="出港" value="出港"></el-option>
                                        <el-option label="中转联程" value="中转联程"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="基准时间"  prop="timeStrategy" :rules
                                        ="[{required:true,message:'进出港不能为空'}]">
                                    <el-select v-model="item.timeStrategy" placeholder="请选择基准时间">
                                        <el-option label="起飞时间" value="起飞时间"></el-option>
                                        <el-option label="落地时间" value="落地时间"></el-option>
                                        <el-option label="自定义时间" value="自定义时间"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-row>
                            <el-row type="flex"  justify="">
                                <el-form-item label="时间差"  prop="beforeOrAfter" :rules
                                        ="[{required:true,message:'时间差不能为空'}]">
                                    <el-select v-model="item.beforeOrAfter" placeholder="请选择时间差">
                                        <el-option label="基准时间前" value="基准时间前"></el-option>
                                        <el-option label="基准时间后" value="基准时间后"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="时间差值（分钟）" prop="difference" :rules="[ {required: true, message: '时间差值不能为空'},
                                                { type:'number',message:'必须为数字值'}]">
                                    <el-input v-model.number="item.difference"></el-input>
                                </el-form-item>
                            </el-row>
                            <!--<el-row type="flex"  justify="">-->
                                <!--<el-form-item label="按组排班"  v-if="addItem.scheduleBaseNum>1">-->
                                    <!--<el-checkbox v-model="item.hasGroup">按组排班</el-checkbox>-->
                                <!--</el-form-item>-->
                            <!--</el-row>-->
                        </el-form>
                    </div>
                </div>
            </div>
            <div class="switch-card__footer" v-if="!parentData" slot="footer" @click="chose(item,index)">
                <el-button type="text" icon="edit" @click="edit(item)" size="small" v-if="!item.edit&&!parentData">编辑</el-button>
                <el-button type="text" icon="edit" @click="addUser(item)" size="small" v-if="!item.edit&&!parentData">配置人员</el-button>
                <el-button type="text" icon="edit"  size="small" v-if="item.edit" @click="update(item,true)">确定</el-button>
                <el-button type="text" icon="close"  size="small" @click="cancleEdit(item,true)" v-if="item.edit">取消</el-button>
            </div>
        </kf-card>



        <el-dialog :title="'配置'+currentService.itemName+'服务人员'" :visible.sync="dialog" >
            <!--:filter-method="filterMethod"-->
            <kf-table-transfer v-model="transferResult" :data="allTeams" :titles="['未选用户','可调配人员']" >
                <template slot="left-columns">
                    <el-table-column label="部门名称" prop="teamName" header-align="center"></el-table-column>
                </template>
                <template slot="right-columns">
                    <el-table-column label="部门名称" prop="teamName" header-align="center"></el-table-column>
                </template>
            </kf-table-transfer>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialog = false">取 消</el-button>
                <el-button type="primary" @click="addUserComplate">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</div>



